<template>
	<view class="home-activity" style="margin-top: 0;">
		<view class="home-activity-item" v-for="item in activity" @click="goActivity()">
			<view class="home-activity-item-img">
				<image :src="item.img"></image>
			</view>
			<view class="home-activity-item-text">
				<view>{{ item.text }}</view>
				<view class="home-activity-item-text-l">活动时间:{{ item.itemSHi }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from "vue"
let activity = ref([
	{
		img: "../../../static/image/home.png",
		text: "社区开展五一劳动节活动",
		itemSHi: "2020-05-01"
	},
	{
		img: "https://cdn7.axureshop.com/demo/1996612/images/%E9%A6%96%E9%A1%B5/u665.svg",
		text: "文明社区，文明你我他",
		itemSHi: "2020-02-01~2020~02-28"
	},
	{
		img: "https://cdn7.axureshop.com/demo/1996612/images/%E9%A6%96%E9%A1%B5/u666.svg",
		text: "端午佳节，一起包粽子",
		itemSHi: "2020-05-15"
	}
])
let goActivity = () => {
	uni.navigateTo({
		url: "/pages/Activities/Activities"
	})
}
</script>

<style lang="less" scoped>
// 社区活动
.home-activity {
	background-color: #fff;
	margin: 20rpx;
	padding: 20rpx;
	box-sizing: border-box;

	.home-activity-item {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;

		// justify-content: space-evenly;
		.home-activity-item-img {
			width: 200rpx;
			height: 130rpx;

			image {
				width: 100%;
				vertical-align: middle;
				height: 100%;
			}
		}

		.home-activity-item-text {
			margin-top: 20rpx;
			font-family: 'ArialMT', 'Arial', sans-serif;
			font-weight: 400;
			font-style: normal;
			font-size: 26rpx;
			letter-spacing: normal;
			color: #333333;
			margin-left: 30rpx;

			.home-activity-item-text-l {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #7f7f7f;
			}
		}
	}
}

.home-activity .home-activity-item:nth-child(1) {
	margin-top: 0 !important;
}
</style>